<template>
	<div class="z-form">
		<a-form-model ref="zForm" :model="form">
			<section v-for="(item, index) in formRender" :key="item.type + index">
				<a-row v-if="item.type === 'row'">
					<section v-for="(item1, index1) in item.children" :key="item1.type + index + '-' + index1">
						<a-col :span="item1.span" v-if="!showText">
							<a-form-model-item
								:label-col="handleRebackCol(item.props, item1.props, 'labelCol')"
								:wrapper-col="handleRebackCol(item.props, item1.props, 'wrapperCol')"
								:label="item1.label"
								:prop="item1.model"
								:key="item1.model"
								:rules="item1.validate"
								:ref="item1.model + '-' + index + '-' + index1"
							>
								<z-input
									v-if="item1.type === 'input'"
									:placeholder="'请输入'"
									:model.sync="form[item1.model]"
									:show-text="showText"
									:disabled="item1.disabled || disabled"
								/>

								<z-select
									v-if="item1.type === 'select'"
									:placeholder="'请输入'"
									:model.sync="form[item1.model]"
									:options="formOptions[item1.model]"
									:show-text="showText"
									:disabled="item1.disabled || disabled"
								/>

								<z-textarea
									v-if="item1.type === 'textarea'"
									:placeholder="'请输入'"
									:model.sync="form[item1.model]"
									:disabled="item1.disabled || disabled"
								/>

								<z-date
									v-if="item1.type === 'date'"
									:placeholder="'请选择日期'"
									:model.sync="form[item1.model]"
									:disabled="item1.disabled || disabled"
								/>

								<z-input-search
									v-if="item1.type === 'inputSearch'"
									:placeholder="'请选择'"
									:model.sync="form[item1.model]"
									:disabled="item1.disabled || disabled"
									:search="item1.on.search"
								/>

								<z-radio
									v-if="item1.type === 'radio'"
									:placeholder="'请选择'"
									:model.sync="form[item1.model]"
									:options="formOptions[item1.model]"
									:disabled="item1.disabled || disabled"
								/>
							</a-form-model-item>
						</a-col>
						<!-- 只显示文本情况 -->
						<a-col :span="item1.span" v-else>
							<a-form-model-item
								:label-col="handleRebackCol(item.props, item1.props, 'labelCol')"
								:wrapper-col="handleRebackCol(item.props, item1.props, 'wrapperCol')"
								:label="item1.label"
							>
							</a-form-model-item>
						</a-col>
					</section>
				</a-row>
			</section>
		</a-form-model>
	</div>
</template>

<script>
export default {
	name: 'zForm',
	props: {
		// 表格渲染格式
		formRender: {
			type: Array,
			default() {
				return [];
			},
		},
		//数组对象下标
		formOptions: {
			type: Object,
			default() {
				return {};
			},
		},
		//数据
		data: {
			type: Object,
			default() {
				return {};
			},
		},
		//全局禁用 add read edit
		formType: {
			type: String,
			default: 'add',
		},
	},

	data() {
		return {
			addFormRules: {
				name: [{ require: true, message: '不能为空', trigger: 'blur' }],
			},
			form: this.data,
			showText: false, //只显示文本
			disabled: false, //全局禁用}
		};
	},
	mounted() {},
	computed: {
		// 动态生成规则
		rules() {
			const childrenJson = {};
			this.formRender.forEach((item) => {
				item.children.forEach((item1) => {
					if (item1.validate) {
						childrenJson[item1.model] = item1.validate;
					}
				});
			});
			// console.log('规则', childrenJson);
			return childrenJson;
		},
	},
	watch: {
		// 监听表单类型
		formType(val) {
			if (val === 'add') {
				this.showText = false;
				this.disabled = false;
			} else if (val === 'edit') {
				this.showText = false;
				this.disabled = false;
			} else {
				this.showText = true;
				this.disabled = true;
			}
		},
		form(val) {
			console.log('butto', val);
		},
	},
	methods: {
		// formitem样式数据
		handleRebackCol(mainCol, subCol, type) {
			if (subCol && subCol[type]) {
				return subCol[type];
			} else {
				if (mainCol && mainCol[type]) {
					return mainCol[type];
				}
			}
			return '';
		},
		//提交校验数据
		async validate() {
			try {
				let valid = await this.$refs.zForm.validate();
				if (valid) {
					return this.form;
				}
			} catch (error) {
				return false;
			}
		},
		// 重置数据
		reset() {
			this.$nextTick(() => {
				Object.keys(this.form).forEach((item) => {
					this.form[item] = null;
				});
			});
		},
	},
};
</script>

<style></style>
